<!-- 折叠面板 -->
<template>
  <div class="m-loading" v-show="display">
    <cube-loading :size="28"></cube-loading> {{content}}
  </div>
</template>

<script>
    import {
        Style,
        Loading
    } from 'cube-ui';
    import Vue from 'vue'
    Vue.use(Loading)

  export default {
      name: 'loading',
    props: {
        content: {
            type: String,
            default: '数据加载中..'
        }
    },
    data(){
      return {
        display: false,
      }
    },
    methods: {
      show(){
        this.display = true
      },
        hide(){
            this.display = false
        }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";

  .m-loading {
    z-index: 1000;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
  }


</style>
